{% extends 'base.html' %}}

<!--引用博客园样式-->
{% block css %}
    <style>
        #div_digg {
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 128px;
            text-align: center;
            margin-top: 10px;
        }

        .diggit {
            float: left;
            width: 46px;
            height: 52px;
            background: url(/media/image/upup.gif) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url(/media/image/downdown.gif) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .clear {
            clear: both;
        }

        .diggword {
            margin-top: 5px;
            margin-left: 0;
            font-size: 12px;
            color: #808080;
        }
    </style>
{% endblock %}

{% block content %}
    <h1>{{ article_obj.title }}</h1>
    <div class="article_content">
        {{ article_obj.content|safe }}
    </div>
    {#    点赞点踩样式开始#}
    <div class="clearfix">
        <div id="div_digg">
            <div class="diggit action">
                <span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
            </div>
            <div class="buryit action">
                <span class="burynum" id="bury_count">{{ article_obj.down_num }}</span>
            </div>
            <div class="clear"></div>
            <div class="diggword" id="digg_tips" style="color:red">
            </div>
        </div>
    </div>
    {#    点赞点踩样式结束#}

    {#    评论楼渲染开始#}
    <div>
        <!--  #1楼 2019-10-28 20:16 0bug  -->
        <ul class="list-group">
            {% for comment in comment_list %}
                <li class="list-group-item">
                    <span>#{{ forloop.counter }}楼</span>
                    <span>{{ comment.comment_time|date:'Y-m-d h:i:s' }}</span>
                    <span><b>{{ comment.user.username }}</b></span>
                    <span>
                        <a class="pull-right reply"
                             username="{{ comment.user.username }}"
                             comment_id="{{ comment.pk }}">回复</a>
                    </span>
                    <div>
                        <!-- 判断当前评论是否是子评论，如果是，需要渲染对应的评论人名 -->
                        {% if comment.parent_id %}
                            <p>@{{ comment.parent.user.username }}</p>
                        {% endif %}
                        {{ comment.content }}
                    </div>
                </li>
                <br>
            {% endfor %}

        </ul>
    </div>
    {#    评论楼渲染结束#}

    {#   文章评论样式开始#}
    {% if request.user.is_authenticated %}
        <div>
            <p><span class="glyphicon glyphicon-comment"></span>发表评论</p>
            <div>
                <textarea name="comment" id="id_comment" cols="60" rows="10"></textarea>
            </div>
            <button class="btn btn-primary" id="id_submit">提交评论</button>
            <span style="color:red" id="error"></span>
            <br>
            <br>
            <br>
            <br>
        </div>
    {% else %}
        <li><a href="{% url 'reg' %}">注册</a></li>
        <li><a href="{% url 'login' %}">登录</a></li>
    {% endif %}


    {#   文章评论样式结束#}
{% endblock %}

{% block js %}
    <script>
        // 给所有的action类绑定事件
        $('.action').click(function () {
            // alert($(this).hasClass('diggit'))  // 返回true|false来判断点赞点踩
            let is_up = $(this).hasClass('diggit');
            let $div = $(this)
            // 超后端发送ajax请求
            $.ajax({
                url: '/up_or_down/',
                type: 'post',
                data: {
                    'article_id': '{{ article_obj.pk }}',
                    'is_up': is_up,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                success: function (args) {
                    if (args.code == 1000) {
                        $("#digg_tips").text(args.msg);
                        // 将前端的数字加一
                        // 先获取到之前的数字
                        let oldNum = $div.children().text(); //拿到文本，是字符串类型
                        // 易错点
                        $div.children().text(Number(oldNum) + 1)
                    } else {
                        $("#digg_tips").html(args.msg);
                    }
                }
            })
        })
        // 设置一个全局的parentID字段
        let parentId = null;
        // 用户点击评论按钮，向后端发送ajax请求
        $('#id_submit').click(function () {
            // 获取用户评论内容
            let conTent = $('#id_comment').val();
            // 判断当前评论是否是子评论，如果是，需要将我们之前手动渲染的@username去除

            if(parentId){
                // 先找到 \n 对应的索引值，然后利用切片，但是切片是顾头不顾尾，所以索引要加一
                let indexNum = conTent.indexOf('\n') + 1;
                conTent = conTent.slice(indexNum)  // 将indexNum之前的所有数据切除，只保留后面的部分
            }

            $.ajax({
                url: '/comment/',
                type: 'post',
                data: {
                    'article_id': '{{ article_obj.pk }}',
                    'content': conTent,
                    // 如果parentId没有值，就是null，后端存储null没有关系
                    'parent_id':parentId,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                success: function (args) {
                    if (args.code == 1000) {
                        $('#error').text(args.msg)

                        // 将评论框里面的内容清空
                        $("#id_comment").val('');

                        // 临时渲染评论楼
                        let userName = '{{ request.user.username }}'
                        let temp = `
                        <li class="list-group-item">
                            <span><b>${userName}</b></span>
                            <div>
                                ${conTent}
                            </div>
                         </li>
                        `
                        // 将生成好的标签添加到ul标签内
                        $('.list-group').append(temp)
                        // 清空全局的parentId
                        parentId = null;
                    }
                }
            })
        })

        // 给回复按钮绑定事件
        $('.reply').click(function () {
            // 需要评论对应的评论人姓名  还需要评论的主键值
            // 获取用户名
            let commentUserName = $(this).attr('username');
            // 获取主键值  直接修改全局的变量名
            parentId = $(this).attr('comment_id');
            // 拼接信息塞给评论框
            $('#id_comment').val('@' + commentUserName + '\n').focus()
        })
    </script>
{% endblock %}